<template>
  <div class="left-menu" >
    <div class="menu-header" @click="toggleMenu()">
      <Icon type="arrow-left-b" v-if="collapseState === 'on'"></Icon>
      <Icon type="arrow-right-b" v-if="collapseState === 'off'"></Icon>
    </div>
    <Menu active-name="prod"  width="auto">
      <div class="layout-logo-left"></div>
      <router-link to="/product/boat">
      <Menu-item name="1">
        <Icon type="android-boat"  :size="iconSize"></Icon>
        <span v-if="collapseState === 'on'">船只</span>
      </Menu-item>
      </router-link>
      <router-link to="/product/boat">
      <!--Menu-item name="2">
        <Icon type="happy-outline" :size="iconSize"></Icon>
        <span v-if="collapseState === 'on'">水上娱乐</span>
      </Menu-item-->
      </router-link>
      <router-link to="/product/package">
      <Menu-item name="3">
        <Icon type="android-playstore" :size="iconSize"></Icon>
        <span v-if="collapseState === 'on'">套餐</span>
      </Menu-item>
      </router-link>
      <router-link to="/product/hotel">
      <Menu-item name="4">
        <Icon type="ios-star" :size="iconSize"></Icon>
        <span v-if="collapseState === 'on'">酒店</span>
      </Menu-item>
      </router-link>
      <router-link to="/product/food">
      <Menu-item name="5">
        <Icon type="android-restaurant" :size="iconSize"></Icon>
        <span v-if="collapseState === 'on'">餐饮</span>
      </Menu-item>
      </router-link>
      <router-link to="/product/vehicle">
      <Menu-item name="6">
        <Icon type="model-s" :size="iconSize"></Icon>
        <span v-if="collapseState === 'on'">车辆</span>
      </Menu-item>
      </router-link>
      <router-link to="/product/plane_ticket">
      <Menu-item name="7">
        <Icon type="plane" :size="iconSize"></Icon>
        <span v-if="collapseState === 'on'">机票</span>
      </Menu-item>
      </router-link>
    </Menu>
  </div>
</template>

<script>
  export default {
    components: {},
    name: 'left-menu',
    props: ['module-name'],
    data: function () {
      return {
        collapseState: 'on'
      }
    },
    computed: {
      iconSize () {
        return this.collapseState === 'on' ? 14 : 24
      }
    },
    methods: {
      toggleMenu () {
        this.$emit('toggleParentSpan')
        this.collapseState === 'on' ? this.collapseState = 'off' : this.collapseState = 'on'
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .left-menu {
    padding: 0 5px 0;
  }
  .menu-header {
    height:30px;
    width: auto;
    background: #fff;
    text-align: center;
    line-height: 30px;
    color: #7c7c7c;
    font-size: 20px;
    border-right: 1px solid transparent;
    border-color: #d7dde4;
  }
  .ivu-menu-vertical .ivu-menu-item {
    color:rgba(60, 63, 64, 0.9);
    cursor: pointer;
    padding: 14px;
    position: relative;
    transition: all 0.2s ease-in-out 0s;
    z-index: 1;
  }
</style>
